<style lang="less" scoped>
.notice-unit{
	padding-bottom: 50px;
	.census-main{
		padding: 0;
	}
	.check-icon{
		width: 20px;
		height: 20px; 
		border: 1px solid #fff;
		border-radius: 50%;
		line-height: 20px;
		text-align: center;
		font-size: 12px;
		&.checked{
			background: #fff;
			color: #13B4A9;
		}
	}
}

</style>
<template>
	<div class="notice-unit">
		<el-form :inline="true" class="filter-blk flex-1" m label-width="80px">
			<el-form-item class="ml-20" label="企业名称">
				<el-input placeholder="请输入企业名称" v-model.trim="filterForm.name"></el-input>
			</el-form-item>
			<el-form-item class="ml-20" label="消防等级">
				<el-select v-model="filterForm.fireRating" placeholder="请选择" clearable>
			      	<el-option :label="item.name" :value="item.id" v-for="(item, key) in levelList" :key="key"></el-option>
			    </el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchAction"><i class="iconfont icon-search"></i> 搜索</el-button>
				<el-button type="primary" @click="resetAction"><i class="iconfont icon-refresh"></i> 重置</el-button>
				<el-button :disabled="regionId==''" type="green" @click="selectAllAction"><i class="el-icon-check check-icon" :class="{checked: allSelected}"></i> 选择下辖所有单位</el-button>
			</el-form-item>
		</el-form>
		<el-container class="mt-20" :style="{height: '480px'}">
		  	<el-aside class="area-blk" width="238px">
		  		<h2 class="hd">行政区域</h2>
		  		<areaTree @nodeClick="areaClickAction"></areaTree>
		  	</el-aside>
		  	<el-main class="census-main">
		  		<el-table 
		  			ref="dataTable"
	  				:data="dataList" 
	  				style="width: 100%"
	  				v-loading="loading"
	  				@selection-change="handleSelectionChange">
	  				<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
				    <el-table-column prop="name" label="企业名称" width="200"></el-table-column>
				    <el-table-column prop="areaName" label="所属行政区域"></el-table-column>
				</el-table>
				<el-pagination
					v-if="total>0"
					class="text-right mt-20 mr-20"
			      	@current-change="handleCurrentChange"
			      	:current-page="currentPage"
			      	:page-size="pageSize"
			      	layout="prev, pager, next, total, jumper"
			      	:total="total">
			    </el-pagination>
		  	</el-main>
		</el-container>
		<div class="selected-units">
			<span class="selected-unit-item" v-for="(item,index) in selectedUnits" :key="index" @click="deleteSelectedUnit(item,index)">{{item.name}} <i class="el-icon-close"></i></span>
			<p v-if="selectedUnits.length==0" class="data-none">暂无选中企业</p>
		</div>
	</div>	
</template>
<script>
import { mapState } from 'vuex'
import areaTree from '@/components/census/AreaTree.vue'
let originSelected = []
let currentUnSelected = []
export default {
	name: 'newRecordAccount',
	props: {
		selected: {
			type: Array,
			default(){
				return []
			},
		},
		activeData: {
			type: Object,
			default () {
				return {}
			}
		}
	},
	components: {
		areaTree
	},
	data () {
		return {
			regionId: '', //行政区划ID
			filterForm: {},
			total: 0,
			currentPage: 1,
			pageSize: 10,
			loading: false,
			dataList: [],
			levelList: [],
			selectedUnits: [],
			currentSelected:[],
			allSelected: false
		}
	},
	watch: {
		currentSelected (selectedArr) {
			let unSelected = []
			this.dataList.forEach(item=>{
				let isInSelected = selectedArr.filter(selectedItem=>{
					return selectedItem.id == item.id
				}).length>0
				if(!isInSelected){
					unSelected.push(item)
				}
			})
			selectedArr.forEach(item=>{
				let isInSelected = this.selectedUnits.filter(selectedItem=>{
					return selectedItem.id == item.id
				}).length>0
				if(!isInSelected){
					this.selectedUnits.push(item)
				}
			})
			this.selectedUnits.forEach((item,index)=>{
				let isInUnSelected = unSelected.filter(unItem=>{
					return unItem.id == item.id
				}).length>0
				if(isInUnSelected){
					this.selectedUnits.splice(index,1)
				}
			})
		}
	},
	methods: {
		selectable (row) {
			return !this.allSelected
		},
		getData (page) {
			this.loading = true
			let params = Object.assign({
            	page: page,
			    limit: this.pageSize,
			    area: this.regionId,
            },this.filterForm)
			this.$get('/business/business/businessListPage', params).then(res => {
            	this.loading = false
            	let data = res.data
                this.currentPage = page
                this.total = data.totalSize
				this.dataList = data.Items
				this.dataList.forEach(item=>{
					let isInselected = this.selectedUnits.filter(selItem=>{
						return selItem.id==item.id
					}).length>0
					if(isInselected){
						this.$nextTick(()=>{
							this.$refs.dataTable.toggleRowSelection(item, true)
						})	
					}
				})
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		getDict (groupname,cbk) {
			this.$get('/business/business/dictList', {
            	groupname: groupname
            }).then(res => {
            	cbk && cbk(res.data)
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		searchAction () {
			this.getData(1)
		},
		resetAction () {
			this.filterForm = {}
		},
		selectAllAction () {
			if(this.allSelected){
				this.selectedUnits = []
			}else{
				this.selectedUnits = [{id: 'all',name:'下辖所有单位'}]
				this.$refs.dataTable.clearSelection()
			}
			
			this.allSelected = !this.allSelected
			// TODO
		},
		areaClickAction (data) {
			this.regionId = data.id
			this.getData(1)
		},
		handleSelectionChange (selectedData) {
			this.currentSelected = selectedData
		},
		deleteSelectedUnit (item,index){
			this.selectedUnits.splice(index,1)
			if(item.id=="all"){
				this.allSelected = false
			}else{
				this.$refs.dataTable.toggleRowSelection(item,false);
			}
		},
		handleCurrentChange (page) {
			this.getData(page)
		},
		confirmAction () {
			if(this.selectedUnits.length==0){
				this.$message.error('请选择企业单位')
				return
			}
			this.$emit('confirm',this.selectedUnits,this.regionId)
		}
	},
	created () {
		this.selectedUnits = [...this.selected]
		this.getData(1)
		this.getDict('消防等级', data => {
			this.levelList = data
			this.levelObj = data.map(item=>{
				let temp = {}
				temp[item.id] = item.name
				return temp
			})
		})
	},
}
</script>